<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link rel="icon" href="./favicon.png">
		<link rel="stylesheet" href="./web/css/main.css" />
		<link rel="stylesheet" href="./web/vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="./web/vendor/toastr/toastr.min.css">
		<link rel="stylesheet" href="./web/vendor/jquery/jquery.dataTables.min.css">

		<title>在线更新管理器</title>
	</head>
	<body>
		<nav class="navbar fixed-top navbar-dark bg-dark-blue justify-content-between">
			<span class="navbar-brand mb-0 h2">
				<img src="./favicon.png" width="30" height="30" class="d-inline-block align-top" alt="" />
				在线更新管理器
			</span>

			<div class="form-inline">
				<div class="navbar-nav">
					<a class="nav-item nav-link active" id="button_logout" href="#">退出</a>
				</div>
			</div>
		</nav>

		<nav class="navbar fixed-bottom navbar-dark bg-gray">
			<span class="navbar-brand mb-0">&copy;<script language="javascript">document.write(new Date().getFullYear());</script> Walkline Studio</span>
		</nav>

		<div class="container py-45">
			<div class="row"> <!--text-monospace">-->
				<div class="col-md-2"></div>

				<div class="accordion col-md-8" id="accordion">
					<div class="card">
						<div class="card-header p-0" id="headingOne">
							<h2 class="mb-0" data-toggle="collapse" data-target="#collapseOne">
								<button class="btn btn-link text-primary disabled" type="button">APP 管理</button>
							</h2>
						</div>

						<div id="collapseOne" class="collapse show" data-parent="#accordion">
							<div class="card-body">
								<div class="input-group mb-2">
									<input type="text" class="form-control" id="text_package_name" placeholder="Package Name">

									<div class="input-group-append">
										<button id="button_append_package" class="btn btn-primary">添加</button>
									</div>
								</div>

								<div class="input-group">
									<select class="custom-select" id="select_remove_package">
									</select>

									<div class="input-group-append">
										<button id="button_remove_package" class="btn btn-danger" type="button">删除</button>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header p-0" id="headingTwo">
							<h2 class="mb-0" data-toggle="collapse" data-target="#collapseTwo">
								<button class="btn btn-link text-primary disabled collapsed" type="button">版本管理</button>
							</h2>
						</div>
						<div id="collapseTwo" class="collapse" data-parent="#accordion">
							<div class="card-body">
								<div class="input-group pb-2">
									<select class="custom-select" id="select_manage_package">
									</select>
								</div>

								<div class="input-group pb-2">
									<div class="custom-file">
									<input type="file" class="custom-file-input" id="input_app_file">
									<label class="custom-file-label" for="input_app_file" id="input_app_file_label"></label>
									</div>
								</div>
								
								<div class="input-group pb-2">
									<div class="input-group-prepend">
										<span class="input-group-text">Version</span>
									</div>
									<input type="tel" onkeyup="value=value.replace(/[^\d.]/g,'')" class="form-control" id="text_app_version" placeholder="1.0.0">
								</div>

								<div class="input-group pb-2">
									<div class="input-group-prepend">
										<span class="input-group-text">Note</span>
									</div>
									<textarea class="form-control" id="textarea_app_note" rows="5"></textarea>
								</div>

								<div class="btn-group btn-group-toggle pb-2 w-100" data-toggle="buttons">
									<label class="btn btn-light active" for="radio_option_wgt" id="radio_option_wgt_label">
										<input type="radio" name="options" id="radio_option_wgt" autocomplete="off" checked> 资源更新
									</label>
									<label class="btn btn-light" for="radio_option_apk" id="radio_option_apk_label">
										<input type="radio" name="options" id="radio_option_apk" autocomplete="off"> 整包更新
									</label>

									<label class="btn btn-light">
										<input type="checkbox" autocomplete="off" id="checkbox_force_update"> 强制更新
									</label>
								</div>
								
								<div class="progress mb-2" style="height: 3px;">
									<div class="progress-bar bg-success" id="progress_upload_progress" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow=""></div>
								</div>

								<button id="button_save_app_information" class="btn btn-primary btn-block" type="button">保存</button>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header p-0" id="headingThree">
							<h2 class="mb-0" data-toggle="collapse" data-target="#collapseThree">
								<button class="btn btn-link text-primary disabled collapsed" type="button">历史版本</button>
							</h2>
						</div>
						<div id="collapseThree" class="collapse" data-parent="#accordion">
							<div class="card-body">
								<div class="input-group pb-2">
									<select class="custom-select" id="select_history_package">
									</select>
								</div>

								<table id="datatable" class="table data-table hover table-striped">
									<thead class="thead-dark">
										<tr>
											<th>version</th>
											<th>name</th>
											<th>size</th>
											<th>type</th>
											<th>force</th>
											<th>date</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header p-0" id="headingFour">
							<h2 class="mb-0" data-toggle="collapse" data-target="#collapseFour">
								<button class="btn btn-link text-primary disabled collapsed" type="button">接口测试</button>
							</h2>
						</div>
						<div id="collapseFour" class="collapse" data-parent="#accordion">
							<div class="card-body">
								<div class="input-group mb-2">
									<select class="custom-select" id="select_test_package">
									</select>
								</div>

								<div class="input-group mb-3">
									<div class="input-group-prepend">
										<label for="text_test_app_version" class="input-group-text">Version</label>
									</div>
									<input type="tel" onkeyup="value=value.replace(/[^\d.]/g,'')" class="form-control" id="text_test_app_version">
									<div class="input-group-append">
										<button id="button_test_package_specified" class="btn btn-warning" type="button">指定版</button>
										<button id="button_test_package_last" class="btn btn-info" type="button">最新版</button>
									</div>
								</div>

								<div id="output_test_result" class="border border-success px-2 py-2 d-none" style="max-height: 360px; overflow: scroll;">
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="col-md-2"></div>
			</div>

			<!-- Modal -->
			<div class="modal fade" id="modal_row_detail" tabindex="-1">
				<div class="modal-dialog modal-dialog-centered">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="modal_row_detail_title">Details</h5>
							<button type="button" class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
						</div>
						<div class="modal-body text-monospace">
							<input type="hidden" value="" id="text_selected_row_index" />

							<div class="input-group input-group-sm pb-2">
								<div class="input-group-prepend">
									<span class="input-group-text">Name</span>
								</div>
								<input type="text" class="form-control" id="modal_row_detail_name">
							</div>

							<div class="form-row">
								<div class="col">
									<div class="input-group input-group-sm pb-2">
										<div class="input-group-prepend">
											<span class="input-group-text">Version</span>
										</div>
										<input type="text" class="form-control" id="modal_row_detail_version">
									</div>
								</div>
								<div class="col">
									<div class="input-group input-group-sm pb-2">
										<div class="input-group-prepend">
											<span class="input-group-text">Type</span>
										</div>
										<input type="text" class="form-control" id="modal_row_detail_type">
									</div>
								</div>
							</div>

							<div class="form-row">
								<div class="col">
									<div class="input-group input-group-sm pb-2">
										<div class="input-group-prepend">
											<span class="input-group-text">Size</span>
										</div>
										<input type="text" class="form-control" id="modal_row_detail_size">
									</div>
								</div>
								<div class="col">
									<div class="input-group input-group-sm pb-2">
										<div class="input-group-prepend">
											<span class="input-group-text">Force</span>
										</div>
										<input type="text" class="form-control" id="modal_row_detail_force">
									</div>
								</div>
							</div>
							<div class="input-group input-group-sm">
								<div class="input-group-prepend">
									<span class="input-group-text">Date</span>
								</div>
								<input type="text" class="form-control" id="modal_row_detail_date">
							</div>
						</div>
						<div class="modal-footer">
							<div class="form-row w-100">
								<div class="col">
									<button type="button" id="button_remove_record_and_file" class="btn btn-danger">Remove All</button>
								</div>
								<div class="col text-right">
									<button type="button" id="button_remove_record_item" class="btn btn-warning">Remove</button>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>

		<script src="./web/vendor/jquery/jquery-3.4.1.min.js"></script>
		<script src="./web/vendor/jquery/jquery.dataTables.min.js"></script>
		<script src="./web/vendor/jquery/fcup.js"></script>
		<script src="./web/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="./web/vendor/toastr/toastr.min.js"></script>
		<script src="./web/vendor/bootstrap/js/docs.min.js"></script>
		<script src="./web/js/const.js"></script>
		<script src="./web/js/index.js"></script>
	</body>
</html>